/*
 * @Date: 2024-12-30 10:34:39
 * @LastEditors: DESKTOP-05FP536\Administrator 18368095041@163.com
 * @LastEditTime: 2025-02-05 10:47:11
 * @FilePath: \vue3-admin\src\service\useTheme.ts
 */

import { generate } from '@ant-design/colors';

export class ColorConfig {
    color = {
        primary: '#5085FF',
        blue: '#215FFF',
        red: '#F14B55',
        green: '#0AC083',
        cyan: '#0097B8',
        orange: 'FF8533'
    };

    background = {
        front: '#ffffff',
        background: '#f7f7f8',
        darkFront: '#000000',
        darkBackground: '#1d1e1f'
    };

    textColor = {
        text: '#000000E0', // 标题颜色
        text1: '#000000E0', // 一级文本颜色
        text2: '#000000A6', // 二级文本颜色
        disabled: '#00000040', // 禁用文本颜色
        border: '#D9D9D9FF', // 主要边框颜色
        divider: '#0505050F', // 分割线颜色
        darkText: '#FFFFFFD9', // 暗黑模式下的标题颜色
        darkText1: '#FFFFFFD9', // 暗黑模式下的一级文本颜色
        darkText2: '#FFFFFFA6', // 暗黑模式下的二级文本颜色
        darkDisabled: '#FFFFFF40', // 暗黑模式下的禁用文本颜色
        darkBorder: '#424242FF', // 暗黑模式下的主要边框颜色
        darkDivider: '#FDFDFD1F' // 暗黑模式下的分割线颜色
    };

    text = {
        lg: '44rpx',
        base: '34rpx',
        sm: '30rpx',
        xs: '26rpx'
    };
}

const camelToKebab = (str: string) => {
    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
};

export const useTheme = (config = new ColorConfig()) => {
    const themeColor = {
        primary: '',
        darkPrimary: '',
        blue: '',
        darkBlue: '',
        red: '',
        darkRed: '',
        green: '',
        darkGreen: '',
        cyan: '',
        darkCyan: '',
        orange: '',
        darkOrange: ''
    };
    const generateThemeColor = () => {
        const colorList = Reflect.ownKeys(
            config.color
        ) as (keyof typeof config.color)[];
        colorList.forEach((key) => {
            Reflect.set(
                themeColor,
                key,
                generate(Reflect.get(config.color, key), {
                    theme: 'default',
                    backgroundColor: config.background.background
                })[5]
            );
            Reflect.set(
                themeColor,
                `dark${key.slice(0, 1).toUpperCase() + key.slice(1)}`,
                generate(Reflect.get(config.color, key), {
                    theme: 'dark',
                    backgroundColor: config.background.darkBackground
                })[5]
            );
        });
    };

    const generateTheme = () => {
        generateThemeColor();
    };

    const getCssVarObject = () => {
        const colorObject: Record<string, string> = {};
        const themeColorKeys = Object.keys(
            themeColor
        ) as (keyof typeof themeColor)[];
        themeColorKeys.forEach((key) => {
            colorObject[`--c-${camelToKebab(key)}`] = themeColor[key];
        });
        const backgroundObject: Record<string, string> = {};
        const themeBackgroundKeys = Object.keys(
            config.background
        ) as (keyof typeof config.background)[];
        themeBackgroundKeys.forEach((key) => {
            backgroundObject[`--bg-${camelToKebab(key)}`] =
                config.background[key];
        });

        const textColorObject: Record<string, string> = {};
        const themeTextColorKeys = Object.keys(
            config.textColor
        ) as (keyof typeof config.textColor)[];
        themeTextColorKeys.forEach((key) => {
            textColorObject[`--c-${camelToKebab(key)}`] = config.textColor[key];
        });

        const textObject: Record<string, string> = {};
        const themeTextKeys = Object.keys(
            config.text
        ) as (keyof typeof config.text)[];
        themeTextKeys.forEach((key) => {
            textObject[`--text-${camelToKebab(key)}`] = config.text[key];
        });
        const record = {
            ...colorObject,
            ...backgroundObject,
            ...textColorObject,
            ...textObject
        };
        console.log(`全局样式变量：`, record);
        return record;
    };

    const getUnocssRules = () => {
        const colorRules: [string, Record<string, string>][] = [];
        const themeColorKeys = Object.keys(
            themeColor
        ) as (keyof typeof themeColor)[];
        themeColorKeys.forEach((key) => {
            colorRules.push([
                `c-${camelToKebab(key)}`,
                {
                    color: `var(--c-${camelToKebab(key)})`
                }
            ]);
        });
        const backgroundRules: [string, Record<string, string>][] = [];
        const themeBackgroundKeys = Object.keys(
            config.background
        ) as (keyof typeof config.background)[];
        themeBackgroundKeys.forEach((key) => {
            backgroundRules.push([
                `bg-${camelToKebab(key)}`,
                {
                    color: `var(--bg-${camelToKebab(key)})`
                }
            ]);
        });

        const textColorRules: [string, Record<string, string>][] = [];
        const themeTextColorKeys = Object.keys(
            config.textColor
        ) as (keyof typeof config.textColor)[];
        themeTextColorKeys.forEach((key) => {
            textColorRules.push([
                `c-${camelToKebab(key)}`,
                {
                    color: `var(--c-${camelToKebab(key)})`
                }
            ]);
        });

        const textRules: [string, Record<string, string>][] = [];
        const themeTextKeys = Object.keys(
            config.text
        ) as (keyof typeof config.text)[];
        themeTextKeys.forEach((key) => {
            textRules.push([
                `text-${camelToKebab(key)}`,
                {
                    color: `var(--text-${camelToKebab(key)})`
                }
            ]);
        });
        const rules = [
            ...colorRules,
            ...backgroundRules,
            ...textColorRules,
            ...textRules
        ];
        return rules;
    };

    generateTheme();
    return {
        generateTheme,
        getCssVarObject,
        getUnocssRules,
        theme: {
            color: themeColor,
            background: config.background,
            textColor: config.textColor,
            text: config.text
        }
    };
};
